<template>
  <div class="w-[100%]">
    <div
      class="flex justify-between leading-[38px] items-center"
      :key="menulistclas"
      v-if="useDataDashboardThemeStore.dataDashboardIsHidden !== 2"
    >
      <div
        class="w-[33px] h-[38px] cursor-pointer flex items-center"
        :class="value < 5 || menuList.length < 7 ? 'opacity-[0.4]' : ''"
        @click="clickLeft"
      >
        <img class="object-cover" :src="getDataImg('menucheckleft')" alt="" />
      </div>
      <div class="px-[0px] w-[776px] overflow-hidden">
        <el-scrollbar
          ref="scrollbarRef"
          @scroll="scroll"
          wrap-class="class-scrollbar"
          :min-size="0"
        >
          <div
            class="scrollbar-flex-content"
            :style="{ width: menuList.length * 126 - 20 + 'px' }"
          >
            <div
              v-for="(item, index) in menuList"
              :key="item.id"
              class="cursor-pointer transition-all textoverhaidd line-clamp-1 px-[10px] text-[16px] duration-300"
              @click="mnueclick(index, item.id)"
              :class="
                item.id == active
                  ? `scrollbar-active-item ${getDataImg('menubgat')}`
                  : `scrollbar-demo-item ${getDataImg('menubg')}`
              "
            >
              <!-- <el-popover v-if="item.id == 3" trigger="click" ref="popoverRef" width="268px"
                                :show-arrow="false" popper-class="popoverClass">
                                <div class="bg-[red] ">4444444</div>
                                <template #reference>
                                    {{ isNullOrEmpty(item.menuName) }}
                                </template>

</el-popover> -->

              <div>{{ isNullOrEmpty(item.menuName) }}</div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div
        class="h-[38px] w-[33px] cursor-pointer flex items-center"
        :class="
          value < (menuList.length - 6) * 125 - 10 && menuList.length > 6
            ? ''
            : 'opacity-[0.4]'
        "
        @click="clickRight"
      >
        <img :src="getDataImg('menucheckright')" alt="" />
      </div>
    </div>
    <div class="flex-c" v-else>
      <div
        class=" cursor-pointer w-[98px] backbtn justify-center items-center gap-[4px] text-[14px] text-[#fff] right-[10px] h-[32px] flex"
        @click="banklast"
      >
        <div class="backleft">
          <el-icon>
            <ArrowLeft :size="12" />
          </el-icon>
        </div>
        <div>返回上级</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, unref } from "vue";
import { isNullOrEmpty } from "@/utils/functions";
import { useDataDashboardThemeStoreHook } from "@/store/modules/data-dashboard-theme";
const useDataDashboardThemeStore = useDataDashboardThemeStoreHook();
import { getDataImg } from "@/utils/data-themset";
const props = defineProps({
  checkmenu: {
    type: Function,
    required: true
  },
  menuList: {
    type: Array,
    required: true,
    default: () => []
  },
  activemenu: {
    type: Object,
    default: () => {}
  }
});
const menulistclas = ref(0);
const active = ref(1);
const clickLeft = () => {
  scrollbarRef.value.setScrollLeft(value.value - 126);
};
const clickRight = () => {
  scrollbarRef.value.setScrollLeft(value.value + 126);
};
import { ElScrollbar } from "element-plus";

const max = ref(0);
const value = ref(0);
const innerRef = ref<HTMLDivElement>();
const scrollbarRef = ref<InstanceType<typeof ElScrollbar>>();

// onMounted(() => {
//     max.value = innerRef.value!.clientHeight - 380
// })
const banklast = () => {
    useDataDashboardThemeStore.CHANGE_SETTING({ key: 'dataDashboardIsHidden', value: 1 })
}
const inputSlider = (value: number) => {
  scrollbarRef.value!.setScrollTop(value);
};
const scroll = ({ scrollLeft }) => {
  value.value = scrollLeft;
};
const popoverRef = ref();
const mnueclick = (e, id) => {
  console.log(props.menuList, "菜单列表");

  if (id == useDataDashboardThemeStore.GET_SETTING("dataDashboardMenuId"))
    return;
  active.value = id;
  props.checkmenu(id);
};
watch(
  () => props.menuList,
  (newValue, oldValue) => {
    if (newValue) {
      setTimeout(() => {
        menulistclas.value++;
      }, 300);
    }
  },
  { immediate: true, deep: true }
);
watch(
  () => useDataDashboardThemeStore.GET_SETTING("dataDashboardMenuId"),
  (newValue, oldValue) => {
    if (newValue) {
      if (props.activemenu.id) {
        active.value = props.activemenu.id;
      } else {
        active.value = newValue;
      }
    }
  },
  { immediate: true }
);
</script>
<style lang="scss" scoped>
// ::v-deep html.dark .el-popper{
//     background-color: #fff !important;;
// }

.scrollbar-flex-content {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.scrollbar-demo-item {
  display: inline-block;
  height: 36px;
  font-size: 16px;
  width: 106px;
  text-align: center;
  color: #b1b4b7;
  line-height: 36px;
  // background: url('@/assets/screenimg/noactiveminu.png');
  overflow: hidden;
}

.scrollbar-active-item {
  display: inline-block;
  height: 38px;
  font-size: 16px;
  width: 106px;
  color: #fff;
  text-align: center;
  // background: url('@/assets/screenimg/activeminu.png');
  overflow: hidden;
}

// ::v-deep(.class-scrollbar)::-webkit-scrollbar {
//     width: 0px !important;
//     height: 0px !important;
// }

// .class-scrollbar {
//     ::v-deep(.el-scrollbar__thumb) {
//         display: none !important;
//     }
// }
::v-deep(.el-scrollbar__thumb) {
  display: none;
}

.textoverhaidd {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.backbtn {
    background: rgba(19, 17, 65, 0.8);
    border-radius: 4px;
    border: 1px solid #4583FF;
}
</style>
<style lang="scss">
.popoverClass {
  background-color: #fff !important;
  margin-top: 10px;
}
</style>
